<template>
  <div class="list">
    <div class="lisBox" v-for="item in info" :key="item">
      <!-- 让利 -->
      <template v-if="status == 1">
        <div class="line" style="margin-bottom: 0.5rem;">
          <div class="left">{{item.order_sn}}</div>
          <div class="right num">{{item.award_amount}}</div>
        </div>
        <div class="line" style="margin-bottom: 0.25rem;">
          <div class="left" style="font-weight: 400;">{{item.source_name}}</div>
          <div class="right" style="font-weight: 400;">{{item.status_name}}</div>
        </div>
        <div class="line">
          <div class="left time">2022-10-28 14:03:04</div>
          <div class="right"></div>
        </div>
      </template>
      <!-- 团队 -->
      <template v-if="status == 2">
        <template v-if="teamStatus == 1">
          <div class="line" style="margin-bottom: 0.5rem;">
            <div class="left">{{item.order_sn}}</div>
            <div class="right num">{{item.reward_amount}}</div>
          </div>
          <div class="line" style="margin-bottom: 0.25rem;">
            <div class="left" style="font-weight: 400;">{{item.reward_type_name}}</div>
            <div class="right" style="font-weight: 400;">{{item.status_name}}</div>
          </div>
          <div class="line">
            <div class="left time">{{item.created_at}}</div>
            <div class="right"></div>
          </div>
        </template>
        <template v-if="teamStatus == 2">
          <div class="line" style="margin-bottom: 0.5rem;">
            <div class="left">{{item.order_sn}}</div>
            <div class="right num">{{item.reward_amount}}</div>
          </div>
          <div class="line">
            <div class="left time">{{item.created_at}}</div>
            <div class="right" style="font-weight: 400;">{{item.status_name}}</div>
          </div>
        </template>
        <template v-if="teamStatus == 3">
          <div class="line" style="margin-bottom: 0.5rem;">
            <div class="left">分红ID:{{item.id}}</div>
            <div class="right num">{{item.reward_amount}}</div>
          </div>
          <div class="line">
            <div class="left time">{{item.created_at}}</div>
            <div class="right"></div>
          </div>
        </template>
      </template>
      <template v-if="status == 3">
        <div class="line" style="margin-bottom: 0.5rem;" v-if="areaStatus == 1">
          <div class="left">{{item.order_sn}}</div>
          <div class="right num">{{item.reward_amount}}</div>
        </div>
        <div class="line" style="margin-bottom: 0.5rem;" v-if="areaStatus == 2">
          <div class="left">分红ID:{{item.id}}</div>
          <div class="right num">{{item.reward_amount}}</div>
        </div>
        <div class="line" style="margin-bottom: 0.25rem;">
          <div class="left" style="font-weight: 400;">{{item.reward_type_name}}</div>
          <div class="right" style="font-weight: 400;" v-if="areaStatus != 2">{{item.status_name}}</div>
        </div>
        <div class="line">
          <div class="left time">{{item.created_at}}</div>
          <div class="right time">代理区域：{{item.area}}</div>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    info: {
      type: null,
      default: []
    },
    nowStatus: {
      type: String,
      default: "1"
    },
    teamStatus: {
      type: String,
      default: "1"
    },
    status: {
      type: String,
      default: "1"
    },
    areaStatus: {
      type: String,
      default: "1"
    }
  },
  data() {
    return {};
  }
};
</script>
<style lang="scss" scoped>
.list {
  padding: 0 0.75rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .lisBox {
    padding: 0.75rem 0;
    border-bottom: 1px solid #e7e7e7;
  }

  .lisBox:last-child {
    border-bottom: none;
  }

  .line {
    display: flex;
    justify-content: space-between;
    flex: 1;

    .left {
      font-size: 0.81rem;
      font-weight: bold;
      flex: 1;
      text-align: left;
    }

    .right {
      flex-shrink: 0;
      font-weight: bold;
      font-size: 0.81rem;
    }

    .num {
      color: #f20606;
    }

    .time {
      color: #999;
      font-weight: 400;
    }
  }
}
</style>